<!--
 * @Date: 2020-08-07 11:30:21
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-09-22 15:29:22
 * @Description: 一级按钮的容器 管理一级按钮
-->

<template>
  <div class="bmp-first-menus-content">
    <div v-swiper:swiperObj="firstMenusSwiperOption">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          :key="key"
          v-for="(item,key) in menuBtnInfo.currMenuInfos"
          ref="swiperslide"
        >
          <transition name="fade" mode="out-in" appear>
            <bmpFirstMenu
              v-show="menuBtnInfo.currMenuInfos.length<=firstMenusSwiperOption.slidesPerView?true:menuBtnInfo.currMenuInfosShow[key]"
              v-bind="item"
              v-model="item.show"
              @changeShow="singleChangeShow"
              @changeSelect="singleChangeSelect"
              ref="bmpFirstMenu"
            ></bmpFirstMenu>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { directive } from 'vue-awesome-swiper'
import bmpFirstMenu from './bmpFirstMenu.vue'
export default {
  data () {
    return {
      menuBtnInfo: {
        currMenuInfosShow: [],
        currMenuInfos: [] // 当前的菜单的结构
      }
    }
  },
  inject: ['firstMenusSwiperOption'],
  components: { bmpFirstMenu },
  directives: {
    swiper: directive
  },
  props: {
    menuInfos: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    // 处理重复标识的问题
    menuInfos: {
      handler (val) {
        if (Array.isArray(val) && Array.from(new Set(val.map(ele => ele.tag))).length === val.length) {
          this.menuBtnInfo.currMenuInfos = val
          if (val.length > this.firstMenusSwiperOption.slidesPerView) {
            // 初始化状态
            this.menuBtnInfo.currMenuInfosShow = val.map(() => {
              return true
            })
            // 初始化显隐
            this.$nextTick(() => {
              this.swiperTransitionEnd()
              this.swiperObj.on('transitionEnd', this.swiperTransitionEnd)
            })
          }
        } else {
          console.error('一级菜单存在重复标识')
          this.menuBtnInfo.currMenuInfos = []
          if (this.swiperObj) {
            this.swiperObj.off('transitionEnd')
          }
        }
      },
      immediate: true
    }
  },
  beforeDestroy () {
    this.swiperObj.off('transitionEnd')
  },
  methods: {
    // 一级菜单的显隐控制
    swiperTransitionEnd () {
      const readIndex = this.swiperObj.realIndex
      const maxLess1 = this.firstMenusSwiperOption.slidesPerView - 1
      for (const i in this.menuBtnInfo.currMenuInfosShow) {
        const intI = parseInt(i)
        if (intI < readIndex || intI > readIndex + maxLess1) {
          this.$set(this.menuBtnInfo.currMenuInfosShow, i, false)
        } else {
          this.$set(this.menuBtnInfo.currMenuInfosShow, i, true)
        }
      }
    },
    // 控制一级菜单的展开状态的
    togShowAll (type) {
      if (typeof type === 'boolean') {
        for (const i in this.menuBtnInfo.currMenuInfos) {
          this.menuBtnInfo.currMenuInfos[i].selected = type
        }
      } else {
        for (const i in this.menuBtnInfo.currMenuInfos) {
          this.menuBtnInfo.currMenuInfos[i].selected = !this.menuBtnInfo.currMenuInfos[i].selected
        }
      }
    },
    // 保证一级菜单唯一展开的
    singleChangeShow (type, tag) {
      if (type) {
        const infos = this.menuBtnInfo.currMenuInfos
        for (const i in infos) {
          if (infos[i].tag !== tag) {
            infos[i].show = false
          }
        }
      }
    },
    // 保证只打开一个
    singleChangeSelect (type, tag) {
      if (type) {
        const infos = this.$refs.bmpFirstMenu
        for (const i in infos) {
          if (infos[i].tag !== tag) {
            infos[i].currSelect = false
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bmp-first-menus-content {
  height: 100%;
  background-image:url('~@/assets/images/bg-menu.png') ;
  ::v-deep .swiper-container {
    height: 100%;
    overflow: visible;
  }
}
</style>
